<template>
  <div class="app-container">
    <div style="display: flex">
      <Find :OriginalFilter="{ static: true }" :formList="formList" @Launchform="Launchform5" @findClicked="findClicked" />
      <Find
        :OriginalFilter="{ static: true }"
        :searchImg="false"
        style="margin-left: 10px; margin-top: 18px"
        :formList="formList1"
        @Launchform="Launchform6"
        @findClicked="findClicked1"
      />
    </div>

    <el-card shadow="never" :body-style="{ padding: '11px 20px' }" class="mt10">
      <div style="display: flex">
        <div style="width: 24%">
          <span>选择指令</span>
          <el-button style="margin-left: 15px" type="primary" size="default" @click="Regenerates">生成指令工序单价>></el-button>

          <Table @currentRow="clicktogetdata" :isLoading="isLoading1" :tableHeader="tableHeader" :tableData="SelectTypeQueryTableDate" />
          <PageModule
            :PageData="{ pageSizeShow: true, buttonS: true, total: totalL }"
            :layout="'prev, pager'"
            @pageChange="pageChangeL"
            @pageSizeChange="pageSizeChangeL"
          />
        </div>

        <div style="width: 32%; margin-left: 20px">
          <span>指令查询</span>
          <Table @currentRow="clicktogetdata1" :isLoading="isLoading2" :tableHeader="tableHeader2" :tableData="SelectColorQueryTableDate" />
          <PageModule
            :PageData="{ pageSizeShow: true, buttonS: true, total }"
            :layout="'prev, pager'"
            @pageChange="pageChange"
            @pageSizeChange="pageSizeChange"
          />
        </div>

        <div style="width: 40%; margin-left: 20px">
          <span>针车型体单价明细档</span>
          <Table
            :summaryData="summaryData1"
            summary
            :isLoading="isLoading3"
            :tableHeader="tableHeader3"
            :tableData="NeedleOperationDetailsQueryTableDate"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'NeedleCarInstructionUnitPrice'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import {
  SelectTypeQuery,
  SelectColorQuery,
  NeedleOperationDetailsQuery,
  RegeneratesTheInstructionUnitPrice
} from '@/api/Control/FactoryControl/NeedleCarInstructionUnitPrice'
// 重新生成指令单价
const numberList = ref()

const summaryData1 = ref<any>([
  {
    index: 2,
    num: 0
  }
])

const numberListParms = ref({
  cfmFlag: '',
  color: '',
  lotNo: '',
  style: ''
})

const clicktogetdata = (row: any) => {
  numberListParms.value.cfmFlag = row.cfmFlag
  numberListParms.value.color = row.color
  numberListParms.value.lotNo = row.lotNo
  numberListParms.value.style = row.style
}

const Regenerates = () => {
  numberList.value = 1
  if (numberListParms.value.lotNo === '') {
    JMessage.warning('请选择需要重新生成的数据')
  } else {
    RegeneratesTheInstructionUnitPriceMehtods()
  }
}

const RegeneratesTheInstructionUnitPriceMehtods = async () => {
  const result = await RegeneratesTheInstructionUnitPrice(numberList.value, numberListParms.value)
  if (result.code === 200) {
    NeedleOperationDetailsQueryMethods()
    SelectTypeQueryMethods()
    SelectColorQueryMethods()
    numberListParms.value.lotNo = ''
    JMessage.success(result.message)
  } else {
    JMessage.error(result.message)
  }
}

// 针车型体单价明细查询
const NeedleOperationDetailsQueryParms = ref({
  lotNo: ''
})

const isLoading3 = ref(true)

const clicktogetdata1 = (row: any) => {
  NeedleOperationDetailsQueryParms.value.lotNo = row.lotNo
  NeedleOperationDetailsQueryMethods()

  numberListParms.value.cfmFlag = row.cfmFlag
  numberListParms.value.color = row.color
  numberListParms.value.lotNo = row.lotNo
  numberListParms.value.style = row.style
}

const NeedleOperationDetailsQueryTableDate = ref([])

const NeedleOperationDetailsQueryMethods = async () => {
  isLoading3.value = true
  const result = await NeedleOperationDetailsQuery(NeedleOperationDetailsQueryParms.value)
  NeedleOperationDetailsQueryTableDate.value = result.list
  summaryData1.value[0].num = result.totalCutPrice
  isLoading3.value = false
}

// 指令查询
const SelectColorQueryTableDate = ref([])

const isLoading2 = ref(true)

const Launchform6 = (row: any) => {
  SelectColorQueryParms.value.lotNo = row[0].inputValue
  SelectColorQueryParms.value.styleNo = row[1].inputValue
  SelectColorQueryParms.value.inTime = row[2].dateValue[0]
  SelectColorQueryParms.value.outTime = row[2].dateValue[1]
  SelectColorQueryMethods()
}

const SelectColorQueryParms = ref({
  inTime: '',
  lotNo: '',
  outTime: '',
  pageNum: 1,
  pageSize: 40,
  sortNo: 0,
  styleNo: ''
})

const SelectColorQueryMethods = async () => {
  isLoading2.value = true
  const result = await SelectColorQuery(SelectColorQueryParms.value)
  SelectColorQueryTableDate.value = result.list.map((item: any) => {
    if (item.cfmFlag === 'Y') {
      item.backgroundColor = '#3FFF38'
    }
    return item
  })
  if (result.list.length !== 0) {
    NeedleOperationDetailsQueryParms.value.lotNo = result.list[0].lotNo
    NeedleOperationDetailsQueryMethods()
  }
  total.value = result.total
  isLoading2.value = false
}

const total = ref(0)

const pageChange = (val: any) => {
  SelectColorQueryParms.value.pageNum = val
  SelectColorQueryMethods()
}

const pageSizeChange = (val: any) => {
  SelectColorQueryParms.value.pageSize = val
  SelectColorQueryMethods()
}

// 选择型体查询
const SelectTypeQueryParms = ref({
  inTime: '',
  lotNo: '',
  outTime: '',
  pageNum: 1,
  pageSize: 40,
  sortNo: 0,
  styleNo: ''
})

const Launchform5 = (row: any) => {
  SelectTypeQueryParms.value.lotNo = row[0].inputValue
  SelectTypeQueryParms.value.styleNo = row[1].inputValue
  SelectTypeQueryParms.value.inTime = row[2].dateValue[0]
  SelectTypeQueryParms.value.outTime = row[2].dateValue[1]
  SelectTypeQueryMethods()
}

const isLoading1 = ref(false)

const SelectTypeQueryTableDate = ref([])

const SelectTypeQueryMethods = async () => {
  isLoading1.value = true
  const result = await SelectTypeQuery(SelectTypeQueryParms.value)
  SelectTypeQueryTableDate.value = result.list.map((item: any) => {
    if (item.cfmFlag === null) {
      item.backgroundColor = '#FF66FF'
    }
    return item
  })
  totalL.value = result.total
  isLoading1.value = false
}

const totalL = ref(0)

const pageChangeL = (val: any) => {
  SelectTypeQueryParms.value.pageNum = val
  SelectTypeQueryMethods()
}

const pageSizeChangeL = (val: any) => {
  SelectTypeQueryParms.value.pageSize = val
  SelectTypeQueryMethods()
}

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'date',
    dateLabel: '派工日期',
    dateValue: ''
  },

  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'date',
    dateLabel: '鞋面入库日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '重新生成指令单价'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

onMounted(() => {
  SelectTypeQueryMethods()

  SelectColorQueryMethods()
})

const findClicked = (row: string) => {
  if (row === '置空') {
    claerInputValueAndSelectValue1()
  }
}

const findClicked1 = (row: string) => {
  if (row === '置空') {
    claerInputValueAndSelectValue()
  }
  if (row === '重新生成指令单价') {
    numberList.value = 2
    if (numberListParms.value.lotNo === '') {
      JMessage.warning('请选择需要重新生成的数据')
    } else {
      RegeneratesTheInstructionUnitPriceMehtods()
    }
  }
}

const claerInputValueAndSelectValue = () => {
  formList1.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    if (item.type === 'date') {
      item.dateValue = ''
    }
  })
}

const claerInputValueAndSelectValue1 = () => {
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    if (item.type === 'date') {
      item.dateValue = ''
    }
  })
}

const tableHeader = ref([
  {
    label: '指令',
    sortable: true,
    prop: 'lotNo'
  },
  {
    label: '型体',
    sortable: true,
    prop: 'style',
    backgroundColor: true
  },
  {
    label: '颜色',
    sortable: true,
    prop: 'color',
    backgroundColor: true
  },
  {
    label: '颜色代号',
    prop: 'colorCode'
  }
])

const tableHeader2 = ref([
  {
    label: '指令',
    sortable: true,
    prop: 'lotNo'
  },
  {
    label: '型体',
    sortable: true,
    prop: 'style'
  },
  {
    label: '颜色',
    sortable: true,
    prop: 'color'
  },
  {
    label: '颜色代号',
    prop: 'colorCode'
  },
  {
    label: '检核状态',
    prop: 'cfmFlag',
    backgroundColor: true
  }
])

const tableHeader3 = ref([
  {
    label: '序号',
    prop: 'seqNo'
  },
  {
    label: '工序名称',
    prop: 'processName'
  },
  {
    label: '单价',
    prop: 'price'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])
</script>

<style lang="less" scoped>
:deep(.el-table .el-table__footer-wrapper) {
  --el-table-row-hover-bg-color: rgb(128, 255, 0);
}
</style>
